<script setup name="Home" lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
import dataList from "./dataList.json";

function onClickCell(item: any) {
  router.push({ path: item.path, query: item.query || {} });
}
</script>

<template>
  <div class="home-content p-5">
    <div class="grid-container">
      <van-cell
        v-for="item in dataList"
        :key="item.title"
        @click="onClickCell(item)"
        class="grid-item"
      >
        <div class="text-left text-black">
          {{ item.title }}
        </div>
      </van-cell>
    </div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px; /* 网格间距 */
}

.grid-item {
  background-color: #ffffff; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 16px; /* 内边距 */
  text-align: center; /* 文本居中 */
  transition: transform 0.2s; /* 动画效果 */
}

.grid-item:hover {
  transform: translateY(-4px); /* 悬停效果 */
}
</style>
